<template>
  <view class="container">
    <view class="container_box">
      <view class="row border-bottom">
        <view class="label">业务日期</view>
        <view class="ipt" style="text-align: right">
          <picker mode="date" class="pick flex a-item fd" :value="form.busDate" @change="bindbusDateChange">
            <view class="uni-input" style="color: #333">{{ form.busDate ? form.busDate : '请选择' }}</view>
          </picker>
        </view>
      </view>
      <view class="row border-bottom">
        <view class="label">加班开始时间</view>
        <view class="ipt" style="text-align: right">
          <leeDatetime @change="startDateChange" placeholder="请选择" :value="form.beginTime" />
        </view>
      </view>
      <view class="row border-bottom">
        <view class="label">加班结束时间</view>
        <view class="ipt" style="text-align: right">
          <leeDatetime @change="bindLeeDateTimeChange" placeholder="请选择" :value="form.endTime" />
        </view>
      </view>
      <view class="row">
        <view class="label">加班地点</view>
        <view class="right">
          <input type="text" placeholder="请输入" v-model="form.place" />
        </view>
      </view>
    </view>

    <view class="container_box">
      <view>加班内容</view>
      <view class="ipt">
        <input class="texta" type="text" v-model="form.content" placeholder="请输入"></textarea>
      </view>
    </view>
    <view class="container_box">
      <view>加班效果</view>
      <view class="ipt">
        <input class="texta" type="text" v-model="form.effect" placeholder="请输入"></textarea>
      </view>
    </view>
    <view class="bottom">
      <button class="btn" @click="handleSubmit">提交</button>
    </view>
  </view>
</template>

<script>
import leeDatetime from '@/components/lee-datetime'
import { getChildSysDeptList, getSysUserList } from '@/service/api/logistics'
import { addOrSave } from '@/service/api/workOvertime'
export default {
  components: {
    leeDatetime,
  },
  created() {
    getChildSysDeptList().catch(err => {
      this.deptList = err.content
    })
    // getSysUserList().catch(err => {
    //   this.userList = err.content
    // })
  },
  data() {
    return {
      form: {},
      deptList: [],
      userList: [],
    }
  },
  methods: {
    changedeptId(val) {
      this.form.deptCode = val.code
      this.form.deptId = val.id
      this.form.deptName = val.name
    },
    changeuserId(val) {
      this.form.userCode = val.code
      this.form.userId = val.id
      this.form.userName = val.name
    },

    bindbusDateChange: function (e) {
      this.$set(this.form, 'busDate', e.detail.value)
    },
    handleSubmit() {
      console.log(this.form, '提交')
      if (this.form.beginTime && this.form.endTime) {
        const start = new Date(this.form.beginTime).getTime()
        const end = new Date(this.form.endTime).getTime()
        if (start > end) {
          uni.showToast({ icon: 'none', title: '开始时间不能大于结束时间' })
          return
        }
      
      }
      this.uniShowLoading()
      addOrSave(this.form)
        .then(res => {
          this.uniHideLoading()
          uni.showToast({ icon: 'success', title: res.msg })
          uni.navigateBack({
            delta: 1,
          })
        })
        .catch(err => {
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    bindLeeDateTimeChange(e) {
      this.$set(this.form, 'endTime', e.value)
    },
    startDateChange(e) {
      this.$set(this.form, 'beginTime', e.value)
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f4f5f9;
  padding: 20rpx;
  height: 100vh;
  &_box {
    padding: 20rpx;
    margin-top: 20rpx;
    background-color: white;
    border-radius: 10rpx;
    .row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      line-height: 80rpx;
      .right {
        text-align: right;
      }
    }
    .border-bottom {
      border-bottom: 1rpx solid #f1f1f1;
    }
  }
  .bottom {
    display: flex;
    align-items: center;
    position: absolute;
    height: 150rpx;
    bottom: 0;
    background-color: white;
    left: 0;
    right: 0;
    .btn {
      background-color: #2f6fef;
      flex: 1;
      height: 80rpx;
      line-height: 80rpx;
      color: white;
      border-radius: 50rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
    }
  }
}
</style>
